<template>
  <div>
    <i-dialog
      title="角色权限"
      width="537px"
      height="689px"
      :visible="visible"
      :close-on-click-modal="false"
      @close="outerClose"
    >
      <i-form
        class="iform"
        :items="dialogFormItems"
        :model="dialogForm"
        ref="dialogForm"
        :inline="true"
        :label-width="0"
        :default-span="12"
        :buttons="dialogFormBtns"
      >
      </i-form>
      <div class="permission-tree">
        <el-tree
          :data="menuOptions"
          ref="tree"
          show-checkbox
          node-key="resourceId"
          :props="defaultProps"
          :default-checked-keys="checkedKeys"
          :filter-node-method="handleFilterNode"
        >
        </el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">保存</el-button>
      </span>
    </i-dialog>
  </div>
</template>
<script>
import { updateRole } from '@/api/permission'
import { handleRouterTree, handleCheckedKeys } from '@/utils'
export default {
  data() {
    return {
      dialogFormItems: [
        {
          type: 'text',
          value: 'keys',
          placeholder: '请输入权限名称',
          span: 12,
        },
      ],
      dialogForm: {
        keys: '',
      },
      dialogFormBtns: [
        {
          text: '查询',
          icon: 'el-icon-search',
          type: 'success',
          click: this.searchPermissionModules,
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    }
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    roleAttr: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    menuOptions() {
      return handleRouterTree(this.roleAttr.menus || [], 'menus')
    },
    checkedKeys() {
      return handleCheckedKeys(this.menuOptions || [], [])
    },
  },
  methods: {
    refreshTable() {
      this.$emit('refreshTable')
    },
    outerClose() {
      this.dialogForm = {
        keys: '',
      }
      this.$emit('update:visible', false)
      this.$refs.tree.setCheckedKeys(this.checkedKeys)
    },
    close() {
      this.$emit('update:visible', false)
    },
    handleFilterNode(value, data, node) {
      return node.data.label.includes(value)
    },
    searchPermissionModules() {
      this.$refs.tree.filter(this.dialogForm.keys)
    },
    submit() {
      let params = {
        buttons: [],
        dataColumns: [],
        enable: this.roleAttr.enable,
        explanation: this.roleAttr.explanation,
        id: this.roleAttr.id,
        menus: [],
        pages: [],
        showName: this.roleAttr.showName,
        urls: [],
      }
      let checkedKeys = this.$refs.tree.getCheckedKeys()
      let halfCheckedKeys = this.$refs.tree.getHalfCheckedKeys()
      checkedKeys.forEach((item) => {
        let key = item.split(':')[0]
        let value = item.split(':')[1]
        params[key] ? params[key].push(value) : null
      })
      halfCheckedKeys.forEach((item) => {
        let key = item.split(':')[0]
        let value = item.split(':')[1]
        params[key] ? params[key].push(value) : null
      })
      updateRole(params).then(
        () => {
          this.$message({
            message: '角色权限修改成功',
            type: 'success',
          })
          this.refreshTable()
          this.outerClose()
        },
        () => {
          this.refreshTable()
          this.outerClose()
        }
      )
    },
  },
}
</script>
<style lang="scss" scoped>
.transfer-to-edit {
  position: relative;
  top: -403px;
  left: 183px;
}
.iform {
  width: 100%;
  &::v-deep .el-button {
    float: right;
  }
  &::v-deep .el-row--flex {
    align-items: center;
  }
}
.permission-tree {
  height: 366px;
  border: 1px solid #ddd1e8;
  border-radius: 3px;
  overflow: auto;
  padding: 24px 0 14px 37px;
}
</style>
